<template>
  <el-row :gutter="10">
    <el-col :xs="24" :sm="12" :lg="6">
      <Card title="销售总额" value="￥ 126560">
        <template>
          <span>周同比 56.67% <i class="el-icon-caret-top el-red" /> 日同比
            19.16% <i class="el-icon-caret-bottom el-green" /></span>
        </template>
        <template #footer>日销售额￥ 12434</template>
      </Card>
    </el-col>
    <el-col :xs="24" :sm="12" :lg="6">
      <Card title="访问量" value="88460">
        <template>
          <LineChart />
        </template>
        <template #footer>
          <span>日访问量 1234</span>
        </template>
      </Card>
    </el-col>
    <el-col :xs="24" :sm="12" :lg="6">
      <Card title="支付笔数" value="182425">
        <template>
          <BarChart />
        </template>
        <template #footer>
          <span>转化率 60.2%</span>
        </template>
      </Card>
    </el-col>
    <el-col :xs="24" :sm="12" :lg="6">
      <Card title="运营活动效果" value="78%">
        <template>
          <ProcessChart />
        </template>
        <template #footer>
          <span>周同比 12%<i class="el-icon-caret-top el-red" /> 日同比 11%<i class="el-icon-caret-bottom el-green" /></span>
        </template>
      </Card>
    </el-col>
  </el-row>

</template>

<script>
import Card from './components/Card'
import BarChart from './components/BarChart.vue'
import LineChart from './components/LineChart.vue'
import ProcessChart from './components/ProcessChart.vue'

export default {
  name: 'Monitor',
  components: {
    Card,
    BarChart,
    LineChart,
    ProcessChart
  }
}
</script>

<style lang="scss" scoped>
span {
  font-size: 12px;
  color: #000;
}
.el-red {
  color: red;
}
.el-green {
  color: green;
}
</style>

